<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				width: 100px;
				height: 100px;
				background-color: seagreen;
				animation: move1 4s;
				animation-iteration-count: infinite;
				animation-direction:alternate;
				position: relative;

				/* animation-duration: 3s; */
			}

			@keyframes move1 {
				from {
					background-color: seagreen;
					left: 0;
				}

				to {
					background-color: seagreen;
					left: 600px;
				}
			}

			#div1 {
				animation-timing-function: linear;
			}

			#div2 {
				animation-timing-function: ease;
			}

			#div3 {
				animation-timing-function: ease-in;
			}

			#div4 {
				animation-timing-function: ease-out;
			}

			#div5 {
				animation-timing-function: ease-in-out;
			}
			#div6{
				animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
			}

			@keyframes move1 {
				from {
					left: 0px;
				}

				to {
					left: 600px;
				}
			}
		</style>
	</head>
	<body>
		<div></div>
		<div id="div1">linear规定从开始到结束的速度相同的动画</div>
		<div id="div2">ease默认</div>
		<div id="div3">ease-in规定慢速开始的动画</div>
		<div id="div4">ease-out规定慢速结束的动画</div>
		<div id="div5">ease-in-out指定开始和结束较慢的动画</div>
		<div id="div6">cubic-bezier(n,n,n,n)运行您在三次贝塞尔函数中定义自己的值</div>
	</body>
</html>
